<div style="POSITION: relative" id="content">
<h3>使用easyUI创建一个拖放的购物车</h3>
<div id="article_content" class="article_content">
  <p>如果你能够简单的实现拖动和放置在你的web应用中,然后你知道你有一些特别的东西,使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;jQuery EasyUI我们在我们的应用中可以简单的实现拖动和放置.</span></p>
  <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">在这个教程中我们将向你展示如何创建一个购物车页面启用用户拖动和放置用户想买的商品,购物栏和价&#26684;将更新.</span></p>
  <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344412875_6217.jpg" alt=""><br>
    </span></p>
  <p></p>
  <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 显示 商品在页面:</h4>
  <pre name="code" class="html">&lt;ul class=&quot;products&quot;&gt;  
    &lt;li&gt;  
        &lt;a href=&quot;#&quot; class=&quot;item&quot;&gt;  
            &lt;img src=&quot;images/shirt1.gif&quot;/&gt;  
            &lt;div&gt;  
                &lt;p&gt;Balloon&lt;/p&gt;  
                &lt;p&gt;Price:$25&lt;/p&gt;  
            &lt;/div&gt;  
        &lt;/a&gt;  
    &lt;/li&gt;  
    &lt;li&gt;  
        &lt;a href=&quot;#&quot; class=&quot;item&quot;&gt;  
            &lt;img src=&quot;images/shirt2.gif&quot;/&gt;  
            &lt;div&gt;  
                &lt;p&gt;Feeling&lt;/p&gt;  
                &lt;p&gt;Price:$25&lt;/p&gt;  
            &lt;/div&gt;  
        &lt;/a&gt;  
    &lt;/li&gt;  
    &lt;!-- other products --&gt;  
&lt;/ul&gt;  </pre>
  你可以看见以上代码,我们添加一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&lt;ul&gt;元素包含一些<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;&lt;li&gt;元素去显示商品,所有商品都有名字和价&#26684;属性,他们包含在&lt;p&gt;标签中.</span></span>
  <p></p>
  <p></p>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建一个购物车:</h4>
    <pre name="code" class="html">&lt;div class=&quot;cart&quot;&gt;  
    &lt;h1&gt;Shopping Cart&lt;/h1&gt;  
    &lt;table id=&quot;cartcontent&quot; style=&quot;width:300px;height:auto;&quot;&gt;  
        &lt;thead&gt;  
            &lt;tr&gt;  
                &lt;th field=&quot;name&quot; width=140&gt;Name&lt;/th&gt;  
                &lt;th field=&quot;quantity&quot; width=60 align=&quot;right&quot;&gt;Quantity&lt;/th&gt;  
                &lt;th field=&quot;price&quot; width=60 align=&quot;right&quot;&gt;Price&lt;/th&gt;  
            &lt;/tr&gt;  
        &lt;/thead&gt;  
    &lt;/table&gt;  
    &lt;p class=&quot;total&quot;&gt;Total: $0&lt;/p&gt;  
    &lt;h2&gt;Drop here to add to cart&lt;/h2&gt;  
&lt;/div&gt; </pre>
    我们使用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid 显示购物栏选项.</span></div>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 拖动克隆的商品:</h4>
    <pre name="code" class="javascript">$('.item').draggable({  
    revert:true,  
    proxy:'clone',  
    onStartDrag:function(){  
        $(this).draggable('options').cursor = 'not-allowed';  
        $(this).draggable('proxy').css('z-index',10);  
    },  
    onStopDrag:function(){  
        $(this).draggable('options').cursor='move';  
    }  
}); </pre>
    注意:我们设置<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">draggable 属性<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;'proxy'为<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'clone',所以拖动元素将由克隆产生.</span></span></span></div>
  <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 放置选择商品到购物车中</h4>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <pre name="code" class="javascript">$('.cart').droppable({  
    onDragEnter:function(e,source){  
        $(source).draggable('options').cursor='auto';  
    },  
    onDragLeave:function(e,source){  
        $(source).draggable('options').cursor='not-allowed';  
    },  
    onDrop:function(e,source){  
        var name = $(source).find('p:eq(0)').html();  
        var price = $(source).find('p:eq(1)').html();  
        addProduct(name, parseFloat(price.split('$')[1]));  
    }  
});  
var data = {&quot;total&quot;:0,&quot;rows&quot;:[]};  
var totalCost = 0;  
function addProduct(name,price){  
    function add(){  
        for(var i=0; i&lt;data.total; i++){  
            var row = data.rows[i];  
            if (row.name == name){  
                row.quantity += 1;  
                return;  
            }  
        }  
        data.total += 1;  
        data.rows.push({  
            name:name,  
            quantity:1,  
            price:price  
        });  
    }  
    add();  
    totalCost += price;  
    $('#cartcontent').datagrid('loadData', data);  
    $('div.cart .total').html('Total: $'+totalCost);  
}     </pre>
      每当放置商品的时候,我们首先得到商品名称和价&#26684;,然后调用'<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">addProduct</span>'函数更新购物栏.</div>
    <div style="text-align:left"><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"></span></span>
      <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
      <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/dd/downloads/easyui-shopping-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-shopping-demo.zip</a></div>
      <br>
      <br>
    </div>
    <br>
    <br>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>